<template>
  <div class="systemMenu">
    <div class="title_box">
      <img src="@/assets/img/syslog.png" alt="">
      <div class="menu_title">系统配置</div>
    </div>
    <div class="systemMainMenu">
      <el-menu :default-active="activeIndex" unique-opened class="el-menu-vertical-demo" @open="handleOpen"
        @close="handleClose">
        <div v-for="(item, index) in MenuList" :key="index">
          <el-submenu :index="String(item.id)" v-if="item.children">
            <template slot="title">
              <i :class="item.menuIcon"></i>
              <span>{{ item.menuName }}</span>
            </template>
            <el-menu-item @click="handleMenu(i)" :index="String(i.id)" v-for="(i, j) in item.children" :key="j">{{
              i.menuName }}</el-menu-item>
          </el-submenu>
          <el-menu-item @click="handleMenu(item)" :index="String(item.id)" v-else>
            <i :class="item.menuIcon"></i>
            <span slot="title">{{ item.menuName }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { getMenuTreeByRole } from "@/api/SystemConfig/menuConfig.js";
export default {
  components: {},
  data() {
    return {
      activeIndex: sessionStorage.getItem("sysMenu") || "1542157185843232",
      MenuList: []
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getMenuTree();
  },
  methods: {
    handleMenu(item) {
      // 删除组织机构本地缓存
      if (item.name !== "组织机构") {
        sessionStorage.removeItem("orgCheckId");
      }
      if (item.name !== "角色配置") {
        sessionStorage.removeItem("rolCheckId");
      }
      if (item.name !== "字典配置") {
        sessionStorage.removeItem("dictionaryId");
      }
      if (item.name !== "菜单配置") {
        sessionStorage.removeItem("menuCheckId");
      }
      // sessionStorage.setItem("sysMenu", item.id);
      sessionStorage.setItem("sysMenu", String(item.id));
      this.$router.push({ path: `${item.menuUrl}` });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 获取菜单结构树
    async getMenuTree() {
      const role = JSON.parse(sessionStorage.getItem("role")) || {};
      await getMenuTreeByRole(role.roleId).then(res => {
        if (res.length > 0) {
          // const result = Object.assign([], res);
          const result = res.filter(i => ["系统配置"].includes(i.menuName));
          this.MenuList = result[0].children;
        }
      });

    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.systemMenu {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  padding-top: 18px;
  display: flex;
  flex-direction: column;

  .systemMainMenu {
    flex: 1;
    overflow: auto;
  }

  .title_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;

    img {
      width: 22px;
      height: 22px;
    }

    .menu_title {
      font-size: 20px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      font-weight: 600;
      margin: 0 0 0 15px;
      color: #1890ff;
    }
  }
}

:deep(.el-menu-item) {
  font-size: 16px;
  user-select: none;
}

:deep(.el-submenu__title) {
  font-size: 16px;
  user-select: none;
}

:deep(.el-submenu__title i) {
  font-size: 14px;
}

:deep(.el-menu-item.is-active) {
  background-color: #e6f7ff;
  box-sizing: border-box;
  border-right: 4px solid #1890ff;
}
</style>
